<template>
  <div ref="chart" class="charts chart-pie"></div>
</template>

<script>
export default {
  name: 'verticalColumn',
  props: {
    disposalRate: {
      type: Object
    }
  },
  watch: {
    disposalRate(newValue) {
      this.disposalRate = newValue
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getEchartData()
    })
  },
  methods: {
    getEchartData() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(0, 255, 233,0)'
                    },
                    {
                      offset: 0.5,
                      color: 'rgba(255, 255, 255,1)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(0, 255, 233,0)'
                    }
                  ],
                  global: false
                }
              }
            },
            renderMode: 'html',
            backgroundColor: 'rgba(15, 45, 83, 0.9)',
            borderWidth: 0,
            borderColor: 'rgba(15, 45, 83, 0.9)',
            textStyle: {
              color: '#fff'
            },
            formatter: val => {
              const style = 'display: inline-block;width: 10px;height: 10px;background: #fff;border-radius: 50%;'
              const tooltip = val
                .map(i => {
                  const { seriesName, color, value } = i
                  return `<span class="border" style='${style} border:2px solid ${color}'></span> ${seriesName}: ${value}`
                })
                .join('<br />')
              return tooltip
            }
          },
          grid: {
            top: '10%',
            left: '10%',
            right: '5%',
            bottom: '45%',
            containLabel: false
          },
          legend: {
            show: true,
            bottom: '20%',
            icon: 'circle',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              color: 'rgb(127, 127, 127)'
            },
            data: this.disposalRate.legend
          },
          xAxis: [
            {
              type: 'category',
              axisLine: {
                show: true,
                lineStyle: {
                  color: 'rgb(127, 127, 127)'
                }
              },
              splitArea: {
                color: 'rgb(127, 127, 127)',
                lineStyle: {
                  color: 'rgb(127, 127, 127)'
                }
              },
              axisLabel: {
                color: 'rgb(127, 127, 127)'
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              boundaryGap: false,
              data: this.disposalRate.category
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#39608F'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: 'rgb(127, 127, 127)'
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                  color: 'rgb(127, 127, 127)'
                }
              }
            }
          ],
          dataZoom: [
            {
              show: true,
              height: 10,
              xAxisIndex: [0],
              bottom: 20,
              start: 0,
              end: 80,
              handleIcon:
                'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
              handleSize: '110%',
              handleStyle: {
                color: 'rgba(255, 255, 255,0.5)'
              },
              textStyle: {
                color: '#fff',
                fontSize: 10
              },
              fillerColor: 'rgba(42, 131, 223,1)',
              borderColor: 'rgba(66, 130, 197,1)',
              backgroundColor: 'rgba(12, 67, 124,0.5)',
              showDataShadow: false,
              brushSelect: false
            },
            {
              type: 'inside'
            }
          ],
          series: [
            {
              name: this.disposalRate.legend[0],
              data: this.disposalRate.list[0],
              type: 'line',
              lineStyle: {
                color: '#256AC1'
              },
              symbol: 'circle',
              color: '#0566E8',
              symbolSize: 5,
              itemStyle: {
                borderWidth: 5,
                borderColor: 'rgba(5, 102, 232, .2)'
              },
              areaStyle: {
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(38, 148, 222, 0.2)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(37, 97, 187, 0.01)'
                  }
                ])
              }
            },
            {
              name: this.disposalRate.legend[1],
              data: this.disposalRate.list[1],
              type: 'line',
              lineStyle: {
                color: '#4FCFE3'
              },
              symbol: 'circle',
              color: 'rgba(79, 207, 227, 1)',
              symbolSize: 5,
              itemStyle: {
                borderWidth: 5,
                borderColor: 'rgba(79, 207, 227, .2)'
              },
              areaStyle: {
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(83, 211, 228, 0.2)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(47, 188, 210, 0.01)'
                  }
                ])
              }
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      }
    }
  }
}
</script>

<style scoped>
.charts {
  width: 100%;
  height: 430px;
}
</style>
